<template>
  <div class="warning-info">
    <div>
      <el-row class="title">
        <el-col :span="8">
          <span class="title-name">预警信息</span>
        </el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="6">
              <div>温度：{{alertNum.TEMPERATURE}}台</div>
            </el-col>
            <el-col :span="6">
              <div>湿度：{{alertNum.HUMIDITY}}台</div>
            </el-col>
            <el-col :span="6">
              <div>CO₂：{{alertNum.CO2}}台</div>
            </el-col>
            <el-col :span="6">
              <div>PM2.5：{{alertNum.PM25}}台</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="alertData"
        :header-cell-style="{background:'#DFE1E6',color:'#1A1919'}"
        :cell-style="{color:'#707070'}"
        max-height="270px"
        empty-text="暂无预警"
      >
        <!--<el-table-column label="设备编号" prop="deviceId"></el-table-column>-->
        <el-table-column label="设备名称" prop="name"></el-table-column>
        <el-table-column label="温度">
          <template scope="{row}">
            <span
              :class="row.data.TEMPERATURE.evaluate.alert?'warning-color':''"
            >{{row.data.TEMPERATURE.val.toFixed(1)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="湿度">
          <template scope="{row}">
            <span
              :class="row.data.HUMIDITY.evaluate.alert?'warning-color':''"
            >{{row.data.HUMIDITY.val.toFixed(0)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="CO₂">
          <template scope="{row}">
            <span :class="row.data.CO2.evaluate.alert?'warning-color':''">{{row.data.CO2.val}}</span>
          </template>
        </el-table-column>
        <el-table-column label="PM2.5">
          <template scope="{row}">
            <span :class="row.data.PM25.evaluate.alert?'warning-color':''">{{row.data.PM25.val}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { getAlertNum } from "@/api/platformManage";
  export default {
    name: "warningInfo",
    props: {
      alertData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        tableData: [],
        alertNum: {}
      };
    },
    mounted() {
      let platformId = this.$route.query.platformId;
      getAlertNum(platformId).then(res => {
        this.alertNum = res.value;
      });
    },
    methods: {}
  };
</script>
<style lang="scss" scoped>
  .warning-info {
    background-color: #fff;
    height: 323px;
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;

    .warning-color {
      color: #ff512d;
    }
    .title {
      align-items: center;
      .title-name {
        font-size: 20px;
        font-weight: bold;
        line-height: 27px;
        color: #0a0a0a;
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
</style>
